

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f172a',
  },
  header: {
    backgroundColor: '#111827',
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  headerTop: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  titleGradient: {
    borderRadius: 4,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'transparent',
    paddingHorizontal: 1,
    paddingVertical: 1,
  },
  headerActions: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  headerActionButton: {
    padding: 8,
  },
  headerActionIcon: {
    fontSize: 18,
    color: '#9CA3AF',
  },
  searchContainer: {
    marginTop: 12,
  },
  searchInputWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#0f172a',
    borderWidth: 1,
    borderColor: '#4B5563',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  searchIcon: {
    fontSize: 16,
    color: '#9CA3AF',
    marginRight: 8,
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: '#F3F4F6',
    padding: 0,
  },
  searchCloseButton: {
    padding: 4,
  },
  searchCloseIcon: {
    fontSize: 16,
    color: '#9CA3AF',
  },
  batchSelectBar: {
    backgroundColor: '#111827',
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
    paddingHorizontal: 16,
    paddingVertical: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  batchSelectLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  selectAllCheckbox: {
    width: 20,
    height: 20,
    borderWidth: 2,
    borderColor: '#6366f1',
    borderRadius: 4,
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  checkboxInner: {
    width: 12,
    height: 12,
  },
  checkboxInnerSelected: {
    backgroundColor: '#6366f1',
  },
  checkboxCheckIcon: {
    fontSize: 10,
    color: '#FFFFFF',
    fontWeight: 'bold',
  },
  checkboxIndeterminate: {
    width: 8,
    height: 2,
    backgroundColor: '#FFFFFF',
    borderRadius: 1,
  },
  selectedCountText: {
    fontSize: 14,
    color: '#D1D5DB',
  },
  cancelBatchButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  cancelBatchIcon: {
    fontSize: 12,
    color: '#9CA3AF',
  },
  cancelBatchText: {
    fontSize: 14,
    color: '#9CA3AF',
  },
  listContent: {
    paddingBottom: 100,
  },
  listHeaderContainer: {
    paddingHorizontal: 16,
    paddingTop: 16,
  },
  listFooterContainer: {
    paddingHorizontal: 16,
    paddingVertical: 16,
    alignItems: 'center',
  },
  loadMoreButton: {
    paddingVertical: 16,
    paddingHorizontal: 24,
    alignItems: 'center',
    justifyContent: 'center',
  },
  loadMoreContent: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  loadMoreIcon: {
    fontSize: 14,
    color: '#6366f1',
  },
  loadMoreText: {
    fontSize: 14,
    color: '#6366f1',
  },
  loadingSpinner: {
    width: 20,
    height: 20,
    borderWidth: 2,
    borderColor: '#f3f3f3',
    borderTopColor: '#6366f1',
    borderRadius: 10,
  },
  emptyStateContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 64,
    paddingHorizontal: 32,
    opacity: 0.7,
  },
  emptyStateIcon: {
    fontSize: 64,
    color: '#4B5563',
    marginBottom: 16,
  },
  emptyStateTitle: {
    fontSize: 18,
    color: '#9CA3AF',
    marginBottom: 8,
    fontWeight: '500',
  },
  emptyStateSubtitle: {
    fontSize: 14,
    color: '#6B7280',
    textAlign: 'center',
    lineHeight: 20,
  },
  batchActions: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#111827',
    borderTopWidth: 1,
    borderTopColor: '#374151',
    paddingHorizontal: 16,
    paddingVertical: 16,
    paddingBottom: Platform.select({
      ios: 34,
      android: 16,
    }),
    flexDirection: 'row',
    gap: 12,
  },
  batchActionButton: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    borderRadius: 8,
    gap: 8,
  },
  approveButton: {
    backgroundColor: '#10b981',
  },
  rejectButton: {
    backgroundColor: '#ef4444',
  },
  batchActionIcon: {
    fontSize: 16,
    color: '#FFFFFF',
  },
  batchActionText: {
    fontSize: 16,
    color: '#FFFFFF',
    fontWeight: '500',
  },
});

